<template>
	<view id="forGet">
		<Header txt="忘记密码" v-if="baidu"></Header>
		<HeaderB txt="忘记密码" v-if="!baidu"></HeaderB>
		<view class="top-tit">
			忘记密码
		</view>
		<view>		
			<input v-model="fogetForm.mobile" placeholder="请输入手机号" autocomplete="off" />
		</view>
		<view class="send">
			<input type="text" value="" placeholder="请输入图形码"  v-model="captcha" />
			<button    type="primary" v-if="isImg" @click="refresh()">获取图形码</button>
			<view class="canvas-img-code" v-if="!isImg" @click="refresh()">
				<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
			</view>
		</view>
		<view class="send">
			<input type="text" value="" placeholder="请输入验证码"  v-model="fogetForm.validateCode" />
			<button  type="primary" v-if="!btnDisabled" @click="getCode">{{btnText}}</button>
			<button  type="default" v-if="btnDisabled" @click="getCode">{{btnText}}</button>
		</view>		
		<view>		
			<input type="password" v-model="fogetForm.password"  placeholder="请输入密码"  />		
		</view>
		<view  id="captcha1">
		</view>
		<view class="btn">
			<button @click="findPassword" class="loginbtn">确定修改</button>
			<button @click="gofo" class="registerbtn">去登录</button>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fogetForm: {
				        mobile:"",
				        password: "",
						validateCode:"",
				        remember: true,
				    },
				dom: "",
				password: "",
				captcha:"",
				verCode: "tyhc", //图形码
				width: 120,
				height: 48,
				isImg:true,
				baidu:true
			};
		},
		onShow() {
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		computed:{
			reginformation() {
			      return this.$store.state.reginformation;
			    },
			 btnText() {
			      return this.$store.state.btnText;
			    },
			btnDisabled() {
			      return this.$store.state.btnDisabled;
			},
		},
		methods:{
			// 图形码
			init() {
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool =this.verCode
					let str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[i];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.isImg=false
				this.$store.dispatch("ClientStartCaptcha",{}).then((response)=>{
					if (response.data.code == 0) {											
						this.verCode = response.data.obj
						this.init();
						uni.removeStorageSync('SendCookie')
						
						console.log(123,response.header)
						console.log(1123,response.header['set-cookie'])
						// #ifdef MP-WEIXIN
						uni.setStorageSync('SendCookie', response.header['Set-Cookie']);			
						// #endif
						// #ifdef MP-BAIDU
						uni.setStorageSync('SendCookie', response.header['set-cookie']);
						// #endif 
						// #ifdef MP-ALIPAY
						this.captcha=this.verCode
						// #endif 
					}
				})
				
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
			gofo(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			// 修改
			findPassword(){
				let that=this
				this.$store.dispatch("FindPassword",this.fogetForm).then((response)=>{					
					if (response.data.code == 0) {
						that.$store.commit("SET_INFORMATION", {
						    mes: "修改成功，请登录",
						    icon: "success",
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/login/login"
							})
						},400)
					}else{
						that.$store.commit("SET_ERRORINFORMATION", {
						   mes: response.data.msg,
						   icon: "error",
						});
					}
				})
			},
			// 获取验证码
			getCode() {
			  let that = this;
			  if (this.fogetForm.mobile == null||this.fogetForm.mobile=='') {				
			    this.$store.commit("SET_ERRORINFORMATION", {
			      mes: "请填写手机号",
			      icon: "error",
			    });
			    return false;
			  } else if (!/^1\d{10}$/.test(this.fogetForm.mobile)) {
			    this.$store.commit("SET_ERRORINFORMATION", {
			      mes: "手机号码格式有误",
			      icon: "error",
			    });
			    return false;
			  }		
			  setTimeout(() => {
			    this.$store.commit("SET_GEETSTATUS", "register");
			  		let _params = {
			  			type: 2,
			  			mobile: this.fogetForm.mobile,
			  			captcha:this.captcha
			  		};
			  		this.$store
			  			.dispatch("SendCode", _params)
			  			.then((response) => {
			  				let dataCode = response;
			  				if (dataCode.data.code == 0) {
			  					that.sendMessage();
			  					that.$store.commit("SET_INFORMATION", {
			  					    mes: "已发送",
			  					    icon: "success",
			  					});					    
			  				} else if(dataCode.data.code == 108) {
								that.$store.commit("SET_ERRORINFORMATION", {
									mes: "图形码错误,注意大小写,请重新输入图形码,再尝试",
									icon: "error",
								});
								this.refresh()
			  				}else{
								that.$store.commit("SET_ERRORINFORMATION", {
								 	mes: dataCode.data.msg,
								 	icon: "error",
								});
							}
			  		})
			  		.catch(() => {});
			  }, 600);
			},
			// 发短信
			sendMessage(){
				let btnDisabled = this.$store.state.btnDisabled;
				if (btnDisabled) {
				    return;
				}
				this.getSecond(60);
			},
			//发送验证码
			getSecond(wait) {
			  // console.log(wait);
			  let _this = this;
			  let _wait = wait;
			  if (wait == 0) {
			    this.$store.commit("SET_DISABLE", false);
			    this.$store.commit("SET_BTNTEXT", "获取验证码");
			    wait = _wait;
			  } else {
			    // console.log(wait);
			    this.$store.commit("SET_DISABLE", true);
			    // this.btnText = "验证码(" + wait + "s)";
			    this.$store.commit("SET_BTNTEXT", "(" + wait + "s)再次获取");
			    wait--;
			    setTimeout(function() {
			      _this.getSecond(wait);
			    }, 1000);
			  }
			},
		}
	}
</script>

<style lang="less" >
	#forGet{
		width: 92%;
		margin: 0 auto;
		padding-top: 10rpx;
		overflow: hidden;
		button::after{
			border:none;
		}
		.send{
			position: relative;
			button{
				height: 50rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				display: inline-block;
				padding: 0 10rpx;
				border-radius: 200rpx;
				padding: 0 16rpx;
				position: absolute;
				top: 23rpx;
				right: 23rpx;
			}
			.canvas-img-code{
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.loginbtn{
			width: 80%;
			margin: 0 auto;
			background-color: rgb(72, 110, 245);
			color: rgb(255, 255, 255);
			border-radius: 100rpx;
			margin-top: 40rpx;
		}
		.registerbtn{
			margin: 0 auto;
			background-color: rgb(255, 255, 255);
			color: rgb(153, 153, 153);
			border: 1rpx solid #cccccc;
			margin-top: 10rpx;
			width: 40%;
			border-radius: 80rpx;
			margin-top: 40rpx;		
		}
		.top-tit{
			    font-size: 48rpx;
			    color: #222222;
			    font-weight: bold;
			    padding-top: 20rpx;
			    margin-bottom: 80rpx;
				.tit{
					font-size: 38rpx;
				}
		}
		input {
			width: 100%;
			height: 96rpx;
			margin-bottom: 10rpx;
			border-radius: 80rpx;
			background-color: #f4f4f4;
			color: #525252;
			padding-left: 20rpx;
			padding-right: 160rpx;
			margin-bottom: 30rpx;
		}
		.span1 {
		      // float: left;
		      width: 14px;
			  height: 14px;
		      cursor: pointer;
		      color: #3373fc;
		      &:hover {
		        opacity: 0.8;
		      }
			  
		 }
		uni-checkbox .uni-checkbox-input {
			width: 14px;
			height: 14px;
		}
		button{
			background: #007AFF;
		}
	}

</style>
